<%@page import="org.ifilm.model.Project"%>
<%@page import="java.util.List"%>
<%@page import="org.ifilm.controller.ProjectController"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page import="org.ifilm.model.User,org.ifilm.util.GeneralConstants"%>

<%
	//TEST TO CHECK WHETHER LOGGED USER IS IN OUR SESSION OR NOT
	User loggedUser = (User)session.getAttribute(GeneralConstants.user);
	
	if (loggedUser != null) {
		System.out.println(loggedUser.getEmail());
	} else {
		System.out.println("No user in session!");
	}
%>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Project Detail</title>
		
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
	    <script src="/film/bootstrap/js/bootstrap.min.js"></script>
	    
	    <style>
	      	body {
	        	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	      	}
	      	.classification { 
				position: relative;
				width: 91px;
				height: 17px;
			}
			.classification .cover {
				position: absolute;
				background: transparent url(img/stars.png) top left no-repeat;
				top: 0px;
				left: 0px;
				width: 91px;
				height: 17px;
				z-index: 101;
			}
			.classification .progress {
				position: absolute;
				background: transparent url(img/stars_full.png) top left no-repeat;
				top: 0px;
				left: 0px;
				height: 17px;
				z-index: 102;
			}
	    </style>
	</head>
	
	<body>
		<div class="navbar navbar-inverse navbar-fixed-top">
		  	<div class="navbar-inner">
		  		<div class="container">
			    	<a class="brand" href="#">iFilm</a>
			    	<ul class="nav">
			      		<li><a href="/film/homeDraft.jsp">Home Taslak</a></li>
			      		<li><a href="/film/createProject.jsp">Create Project</a></li>
			      		<li class="active"><a href="/film/projectDetail.jsp">Project Detail</a></li>
			      		<li><a href="/film/userProfile.jsp">Profile</a></li>
			      		<li><a href="#">PAGE</a></li>			      		
			    	</ul>
			    	
			    	<div class="navbar-text pull-right">
			    		<a href='/film/userProfile.jsp' class="navbar-link"><%=loggedUser.getName() + " " + loggedUser.getSurname()%></a>
			    		<a href='#' id="logout" class="navbar-link">Logout</a>
			    	</div>
		    	</div>
		    </div>
		 </div>
		 
		 <div class="container">
			 <div class="content-container">
			 	<table class="table">
				 	<tr>
				 		<td rowspan="4">
				 			<img class="media-object" src="http://placehold.it/200x200">
				 			<div class="classification"><div class="cover"></div><div class="progress" style="width: 50%;"></div></div>
				 		</td>
				 		<td colspan="2"><h1 id="title">${project.projectName}</h1><h4>Project Owner</h4></td>
				 	</tr>
				 	<tr>
				 		<td colspan="2"><h6>Estimated Start Date</h6></td>
				 	</tr>
				 	<tr>
				 		<td colspan="2"><h6>Estimated Release Date</h6></td>
				 	</tr>
				 	<tr>
				 		<td colspan="2"><h6>Location</h6></td>
				 	</tr>
				 	<tr>
				 		<td colspan="3">
				 			<h5>Detailed Description:</h5>
				 			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus convallis congue nulla non consequat. 
				 			Pellentesque cursus cursus ante id hendrerit. Nulla sodales arcu ut massa varius feugiat. Phasellus vitae 
				 			sem et tortor pretium pharetra. Sed bibendum pharetra adipiscing. Praesent id sapien in erat tincidunt 
				 			porttitor et id diam. Fusce eu laoreet tellus. Nulla facilisi. Etiam tincidunt est ut felis congue ultricies. 
				 			Aliquam tincidunt ornare euismod. Cras a ultrices est. Donec vitae libero turpis. Vestibulum ipsum urna, 
				 			posuere eu consequat nec, egestas ut massa. Duis tincidunt viverra dui non rutrum.
				 			Morbi nec tortor massa, in tristique lorem. Nulla pulvinar nunc id nunc laoreet venenatis. Phasellus pharetra, 
				 			nibh sit amet dapibus venenatis, lacus velit ullamcorper ligula, at pellentesque diam enim at eros. Sed faucibus, 
				 			ligula malesuada congue laoreet, orci felis interdum dolor, vel mattis nisl quam non mauris. Sed facilisis laoreet 
				 			magna sit amet semper. Nunc eget enim mi, non gravida diam. Vestibulum nec enim risus. Cras quis magna imperdiet 
				 			lacus facilisis adipiscing. Suspendisse euismod interdum enim ac semper. Maecenas vel urna a lacus fringilla tincidunt. 
				 			Praesent sit amet elit in risus semper tempor laoreet id sapien. Donec sed nibh erat, sed consectetur sapien. Sed 
				 			feugiat ante et mi tempus pellentesque.
				 		</td>
				 	</tr>
				</table>		
				<ul class="nav nav-tabs">
					<li class="active"><a href="#home" data-toggle="tab">Job Postings related to this project</a></li>
					<li><a href="#profile" data-toggle="tab">Equipments needed for this project</a></li>
				</ul>
				 
				<div class="tab-content">
					<div class="tab-pane active" id="home">
						<table class="table" border=0>					
							<tr>
								<td width=66% border=0>Actor who plays the main role</td>
								<td>0/1 <button style="float:right">Apply for this job</button></td>
							</tr>
							<tr>
								<td>Male experinced actor</td>
								<td>2/5 <button style="float:right">Apply for this job</button></td>
							</tr>
							<tr>
								<td>Actresses</td>
								<td>2/2</td>
							</tr>
						</table>
 					</div>
					<div class="tab-pane" id="profile">
						<table class="table">
							<tr>
						 		<td colspan="2">Camera with macro lens</td>
						 		<td>0/1 <button style="float:right">Offer this equipment</button></td>
						 	</tr>
						 	<tr>
						 		<td colspan="2">Microphone</td>
						 		<td>1/1</td>
						 	</tr>
						 </table>
					</div>
				</div>
			</div> 
	 	</div>
	</body>
	
	<script>
		$(function () {
		  	$('#myTab a:last').tab('show');
		})
	</script>
</html>